<template>
  <el-card class="box-card" shadow="never" style="margin-top: 30px;">
    <el-row>
      <el-col :span="1"><div class="grid-content "></div></el-col>
      <el-col :span="6"><div class="grid-content ">
        <el-image style="width:100% ; height: 180px" :src="img_src"></el-image>
      </div></el-col>
      <el-col :span="1"><div class="grid-content "></div></el-col>
      <el-col :span="16"><div class="grid-content ">
        <div class="title-style" @click="goto_detail_notice">{{title}}</div>
        <p class="text-style">{{content}}</p>
        <div class="info">
          <p>{{author}}</p>
          <p>·</p>
          <p>{{times}}</p>
        </div>
      </div></el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'NoticeCards',
  data(){
    return{
      // title:"标题",
      // content:"这是内容",
      // author:"作者",
      // times:"时间",
      // img_src:require('@/assets/test2.jpg'),
    }
  },
  props:["title","content","author","times","img_src"],
  methods:{
    goto_detail_notice(){
      this.$router.push('/DetailNotice')
    }
  }
}
</script>

<style scoped>
.title-style{
  font-family:"微软雅黑";
  font-size: 22px;
}
.info p{
  float: left;
  margin: 0px;
}
.info{
  margin: 0px;
  font-size: 16px;
  color: #787878;
}
.text-style{
  font-family:"微软雅黑";
  font-size: 16px;
  width: 100%;
  height: 100px;
}
.box-card{
  border-style: solid;
  border-width: 4px;
  border-color:#FFFFFF;
}
.box-card:Hover {
  border-color: #abfc7f;
  cursor:pointer ;
}
</style>
